<div class="underlying" style="width:100%;display: flex;flex-direction: row;flex-wrap: wrap;">
    <div class="table">
        <div class="choose">
            <!-- 淨利潤(週) -->
            <div class="box">
                <div class="text">淨利潤(週)</div>
                <div class="choose_select" style="margin-left: 150px;">開始時間：
                    <nz-date-picker [nzAllowClear]=false nzFormat="yyyy/MM" [nzDisabled]=true nzPlaceHolder="Start">
                    </nz-date-picker>
                </div>
                <div class="choose_select" style="margin-left: 82px;">結束時間：
                    <nz-date-picker [nzAllowClear]=false nzFormat="yyyy/MM" [nzDisabled]=true nzPlaceHolder="End">
                    </nz-date-picker>
                </div>
                <!-- 展示echarts -->
                <div class="btn" style="margin-left: 100px;">
                    <button class="showEchart" (click)="showEcharts6()"></button>
                </div>
                <!-- 下載報表 -->
                <div class="btn" style="margin-right: 100px;">
                    <button class="download" (click)="download6()"></button>
                </div>
                <!-- 下載中 -->
                <div *ngIf="isShowForProgress" class="loading-overlay">
                  <div class="ant-spin-container">
                    <nz-progress class="custom-progress" [nzPercent]="progressValue" [nzStatus]="progressStatus"></nz-progress>
                    <label style="color:white;margin-left: 145px;">{{loadingText}}</label>
                  </div>
                </div>
                <!-- 净利润Echart -->
                <div class="benefit" id="benefitEchart" style="top:-30px">
                    <div class="title">净利润</div>
                    <div class="close" (click)="noshowEcharts6()">×</div>
                    <div id="benefit"></div>
                </div>
            </div>

            <!-- 分割线 -->
            <div class="wrap"></div>

            <!-- 各厂效益 -->
            <div class="box">
                <div class="text">各廠效益</div>
                <div class="choose_select" style="margin-left: 150px;">開始時間：
                    <nz-date-picker [nzAllowClear]=false nzFormat="yyyy/MM" [nzDisabled]=true nzPlaceHolder="Start">
                    </nz-date-picker>
                </div>
                <div class="choose_select" style="margin-left: 82px;">結束時間：
                    <nz-date-picker [nzAllowClear]=false nzFormat="yyyy/MM" [nzDisabled]=true nzPlaceHolder="End">
                    </nz-date-picker>
                </div>
                <!-- 展示echarts -->
                <div class="btn" style="margin-left: 100px;">
                    <button class="showEchart" (click)="showEcharts7(true)"></button>
                </div>
                <!-- 下載報表 -->
                <div class="btn" style="margin-right: 100px;">
                    <button class="download" (click)="download7()"></button>
                </div>
                <!-- 各廠效益Echart -->
                <div class="xiaoyi" id="xiaoyiEchart" style="top:-130px">
                    <div class="title">各廠效益</div>
                    <div class="close" (click)="noshowEcharts7()">×</div>
                    <div id="xiaoyi"></div>
                </div>
            </div>

            <!-- 分割线 -->
            <div class="wrap"></div>

            <!-- 人工工時比例報表 -->
            <div class="box">
                <div class="text">人工工時比例報表</div>
                <div class="choose_select" style="margin-left: 150px;">開始時間：
                    <nz-date-picker [nzAllowClear]=false nzFormat="yyyy/MM/dd" [(ngModel)]="startValue" nzPlaceHolder="Start" (ngModelChange)="StartChange($event)">
                    </nz-date-picker>
                </div>
                <div class="choose_select" style="margin-left: 82px;">結束時間：
                    <nz-date-picker [nzAllowClear]=false nzFormat="yyyy/MM/dd" [(ngModel)]="endValue" nzPlaceHolder="End" (ngModelChange)="EndChange($event)">
                    </nz-date-picker>
                </div>
                <!-- 展示echarts -->
                <div class="btn" style="margin-left: 100px;visibility:hidden">
                    <button class="showEchart"></button>
                </div>
                <!-- 下載報表 -->
                <div class="btn" style="margin-right: 100px;">
                    <button class="download" (click)="download()"></button>
                </div>
            </div>

            <!-- 分割线 -->
            <div class="wrap"></div>

            <!-- OTD -->
            <div class="box">
                <div class="text">治具OTD</div>
                <div class="choose_select" style="margin-left: 150px;">開始時間：
                    <nz-date-picker [nzAllowClear]=false nzFormat="yyyy/MM" [nzDisabled]=true nzPlaceHolder="Start">
                    </nz-date-picker>
                </div>
                <div class="choose_select" style="margin-left: 82px;">結束時間：
                    <nz-date-picker [nzAllowClear]=false nzFormat="yyyy/MM" [nzDisabled]=true nzPlaceHolder="End">
                    </nz-date-picker>
                </div>
                <!-- 展示echarts -->
                <div class="btn" style="margin-left: 100px;">
                    <button class="showEchart" (click)="showEchartsOTD(true)"></button>
                </div>
                <!-- 下載報表 -->
                <div class="btn" style="margin-right: 100px;">
                    <button class="download" (click)="download5()"></button>
                </div>
                <!-- OTDEchart -->
                <div class="otd" id="otdEchart" style="top:-335px">
                    <div class="title">治具OTD</div>
                    <div class="close" (click)="noshowEchartsOTD()">×</div>
                    <div id="otd"></div>
                </div>
            </div>

            <!-- 分割线 -->
            <div class="wrap"></div>

            <!-- Delay原因分析報表 -->
            <div class="box">
                <div class="text">Delay原因分析報表</div>
                <div class="choose_select" style="margin-left: 150px;">開始時間：
                    <nz-date-picker [nzAllowClear]=false nzFormat="yyyy/MM" [(ngModel)]="startValue3" nzPlaceHolder="Start" (ngModelChange)="StartChange3($event)">
                    </nz-date-picker>
                </div>
                <div class="choose_select" style="margin-left: 82px;">結束時間：
                    <nz-date-picker [nzAllowClear]=false nzFormat="yyyy/MM" [(ngModel)]="endValue3" nzPlaceHolder="End" (ngModelChange)="EndChange3($event)">
                    </nz-date-picker>
                </div>
                <!-- 展示echarts -->
                <div class="btn" style="margin-left: 100px;visibility:hidden">
                    <button class="showEchart"></button>
                </div>
                <!-- 下載報表 -->
                <div class="btn" style="margin-right: 100px;">
                    <button class="download" (click)="download3()"></button>
                </div>
            </div>

            <!-- 分割线 -->
            <div class="wrap"></div>

            <!-- 治具校驗(總檢)報表 -->
            <div class="box">
                <div class="text">治具校驗(總檢)報表</div>
                <div class="choose_select" style="margin-left: 150px;">開始時間：
                    <nz-date-picker [nzAllowClear]=false nzFormat="yyyy/MM/dd" [(ngModel)]="startValue1" nzPlaceHolder="Start" (ngModelChange)="StartChange1($event)">
                    </nz-date-picker>
                </div>
                <div class="choose_select" style="margin-left: 82px;">結束時間：
                    <nz-date-picker [nzAllowClear]=false nzFormat="yyyy/MM/dd" [(ngModel)]="endValue1" nzPlaceHolder="End" (ngModelChange)="EndChange1($event)">
                    </nz-date-picker>
                </div>
                <!-- 展示echarts -->
                <div class="btn" style="margin-left: 100px;">
                    <button class="showEchart" (click)="showEchartsZongjian()"></button>
                </div>
                <!-- 下載報表 -->
                <div class="btn" style="margin-right: 100px;">
                    <button class="download" (click)="download1()"></button>
                </div>
                <!-- 總檢Echart -->
                <div class="zongjian" id="zongjianEchart" style="top:-535px">
                    <div class="title">總檢</div>
                    <div class="close" (click)="noshowEchartsZongjian()">×</div>
                    <div id="zongjian"></div>
                </div>
            </div>

            <!-- 分割线 -->
            <div class="wrap"></div>

            <!-- 治具校驗(品質檢驗)報表 -->
            <div class="box">
                <div class="text">治具校驗(品質檢驗)報表</div>
                <div class="choose_select" style="margin-left: 150px;">開始時間：
                    <nz-date-picker [nzAllowClear]=false nzFormat="yyyy/MM/dd" [(ngModel)]="startValue2" nzPlaceHolder="Start" (ngModelChange)="StartChange2($event)">
                    </nz-date-picker>
                </div>
                <div class="choose_select" style="margin-left: 82px;">結束時間：
                    <nz-date-picker [nzAllowClear]=false nzFormat="yyyy/MM/dd" [(ngModel)]="endValue2" nzPlaceHolder="End" (ngModelChange)="EndChange2($event)">
                    </nz-date-picker>
                </div>
                <!-- 展示echarts -->
                <div class="btn" style="margin-left: 100px;">
                    <button class="showEchart" (click)="showEchartsPinjian()"></button>
                </div>
                <!-- 下載報表 -->
                <div class="btn" style="margin-right: 100px;">
                    <button class="download" (click)="download2()"></button>
                </div>
                <!-- 品檢Echart -->
                <div class="pinjian" id="pinjianEchart" style="top:-640px">
                    <div class="title">品檢</div>
                    <div class="close" (click)="noshowEchartsPinjian()">×</div>
                    <div id="pinjian"></div>
                </div>
            </div>

            <!-- 分割线 -->
            <div class="wrap"></div>

            <!-- 呆滞料報表 -->
            <div class="box">
                <div class="text">呆滞料報表</div>
                <div class="choose_select" style="margin-left: 150px;">開始時間：
                    <nz-date-picker [nzAllowClear]=false nzFormat="yyyy/MM" [nzDisabled]=true nzPlaceHolder="Start">
                    </nz-date-picker>
                </div>
                <div class="choose_select" style="margin-left: 82px;">結束時間：
                    <nz-date-picker [nzAllowClear]=false nzFormat="yyyy/MM" [nzDisabled]=true nzPlaceHolder="End">
                    </nz-date-picker>
                </div>
                <!-- 展示echarts -->
                <div class="btn" style="margin-left: 100px;">
                    <button class="showEchart" (click)="showEchartsDaizhi(true)"></button>
                </div>
                <!-- 下載報表 -->
                <div class="btn" style="margin-right: 100px;">
                    <button class="download" id="download" (click)="download4()"></button>
                </div>
                <!-- daizhiEchart -->
                <div class="daizhi" id="daizhiEchart" style="top:-740px">
                    <div class="title">呆滯料</div>
                    <div class="close" (click)="noshowEchartsDaizhi()">×</div>
                    <div *ngIf="echartsLoading" class="myModal myFade" id="myFade">
                        <div class="loading">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                    <div id="daizhi"></div>
                </div>
            </div>
        </div>

        <!-- 总检echarts -->
        <div id="completeChart"></div>
        <!-- 品鉴echarts -->
        <div id="pinjian"></div>

    </div>
</div>
